/*<style> Gambi para funcionar sintax check no VSCode */
:root {
	--primary_bg:  #ECF0F9;
	--secondary_bg: #ffffff;
	--btn_bg: #2684FF;
	--btn_bg_hover: #2684FF;
	--text_color: #666666;
	--border-color: #ced4da;
}

html,
body {
	padding: 0 !important;
	margin: 0 !important;	
	background-color:var(--primary_bg);
}

/* CSS GERAL DA TELA LOGIN */
#geral{
    height: 99.8vh;
    width: 99.8vw;
	display: flex;
	align-items: center;
}

/* FORMULÁRIO DE LOGIN */
#box-cinza {
	background-color: var(--secondary_bg);
    padding: 4.5rem 2rem;
    border-radius: 0.3rem;
    box-shadow: rgba(0,0,0,0.1) 0px 0.5px 7px;
}

#box-cinza label {
    color: var(--text_color);
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
}

#box-cinza label span {
	color: red !important;
}

#box-cinza .form-control {
	background: var(--secondary_bg);
	color: var(--text_color);
	border: 1px solid var(--border-color);
}

#box-cinza .custom-control-label::before {
	background-color: var(--secondary_bg);
}

#box-cinza .custom-control-input:checked ~ .custom-control-label::before {
	color: #fff;
    border-color: #007bff;
    background-color: #007bff !important;
}

#box-cinza .recupera-wrapper a {
	color: var(--text_color);
    font-weight: 600;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
}

#box-cinza .recupera-wrapper a:hover {
	color: var(--text_color);
	text-decoration: none;
}

#box-cinza .custom-control-label:hover {
	cursor: hover;
}

#box-cinza #mensagem p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, 0);
	width: 100%;
	font-size: 0.8rem;
}

#box-cinza .btn-login {
	border-radius: 0.25rem;
    padding: 0.50rem 0.8rem;
    border: none;
    width: 35% !important;
    font-weight: bold;
    cursor: pointer;
	background: var(--btn_bg);
    color: white !important;
    border: none !important;
    transition: background-color ease .15s !important;
    font-size: 0.9rem;
    display: block;
    text-align: center;
}


#box-cinza .btn-login:hover {
	background: var(--btn_bg_hover);
	text-decoration: none;
}

#box-cinza .titulo,
#box-cinza .info {
	color: var(--text_color);
}

#box-cinza .titulo {
	font-size: 1.2rem;
	font-weight: 700;
}

#box-cinza .info {
	font-size: 0.9rem;
}

@media (max-width: 575.98px) {

	.image-wrapper {
		padding: 2rem;
	}

	#box-cinza {
		margin: 0 2rem;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) { 

	.image-wrapper {
		padding: 2rem;
	}

	#box-cinza {
		margin: 0 2rem;
	}
}

@media (min-width: 1200px) {
	#box-cinza {
		margin: 2rem;
	}
}